---
import type { Frontmatter } from '../../config';
import MoreMenu from '../RightSidebar/MoreMenu.astro';
import TableOfContents from '../RightSidebar/TableOfContents';
import type { MarkdownHeading } from 'astro';

type Props = {
  frontmatter: Frontmatter;
  headings: MarkdownHeading[];
};

const { frontmatter, headings } = Astro.props as Props;
const title = frontmatter.title;
---

<article id="article" class="content">
  <section class="main-section">
    <h1 class="content-title" id="overview">{title}</h1>
    <nav class="block sm:hidden">
      <TableOfContents client:media="(max-width: 50em)" headings={headings} />
    </nav>
    <slot />
  </section>
  <nav class="block sm:hidden">
    <MoreMenu />
  </nav>
</article>

<style>
  .content {
    padding: 0;
    max-width: 85ch;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .content > section {
    margin-bottom: 4rem;
  }

  .block {
    display: block;
  }

  @media (min-width: 50em) {
    .sm\:hidden {
      display: none;
    }
  }
</style>
